<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        * {
            margin: 0px;
            padding: 0px;
        }

        #nbaplayer {
            width: 250px;
            /* height: 300px; */
            background-color: gray;
            margin: auto;
        }

        #kl,
        #zm {
            height: 178px;
            width: 112px;
            border: rgba(0, 0, 0, 0.12) solid 1px;
            float: left;
            margin: 5px;
        }
        .teamimg{
            height: 16px;
            width: 16px;
        }
        #kl,#rwtp,#zm,#rwtp2{
            border-radius: 10px;
            text-align: center;
        }

        .name{
            font-size: 14px;
        }
        .type,.team{
            font-size: 12px;
            color: #70757a;
        }
    </style>
</head>

<body>
    <div id="nbaplayer">
        <div id="kl">
            <img src="" alt="kltp" id="rwtp">
            <br>
            <span class="name"></span>
            <br>
            <span class="type"></span>
            <br>
            <img src="" alt="qdxx" class="teamimg">
            <span class="team"></span>
        </div>
        <div id="zm">
            <img src="" alt="zmpt" id="rwtp2">
            <br>
            <span class="name"></span>
            <br>
            <span class="type"></span>
            <br>
            <img src="" alt="qdxx" class="teamimg">
            <span class="team"></span>
        </div>
    </div>
    <script>
        function person(name,type,team,retpurl,teamurl){
            this.name=name;
            this.type=type;
            this.team=team
            this.retpurl=retpurl;
            this.teamurl=teamurl;
        }
        var kl=new person('curry','控球后位','金州勇士','img/curryImg.jpg','img/curryTeamImg.png');
        var zm=new person('abc','前锋','密尔沃基雄鹿','img/abcImg.jpg','img/abcTeamImg.png');
        var klimg=document.getElementById('rwtp');
        klimg.src=kl.retpurl;
        var namearray=document.getElementsByClassName('name');
        var klname=namearray[0];
        klname.innerHTML=kl.name;
        var typearr =document.getElementsByClassName('type');
        var kltypr=typearr[0];
        kltypr.innerHTML=kl.type;
        var teamurlarr=document.getElementsByClassName('teamimg');
        var klteamurl=teamurlarr[0];
        klteamurl.src=kl.teamurl;
        var teamarr=document.getElementsByClassName('team');
        var klteam=teamarr[0];
        klteam.innerHTML=kl.team;
        var zmimg=document.getElementById('rwtp2');
        zmimg.src=zm.retpurl;
        var zmname=namearray[1];
        zmname.innerHTML=zm.name;
        var zmtypr=typearr[1];
        zmtypr.innerHTML=zm.type;
        var zmteamurl=teamurlarr[1];
        zmteamurl.src=zm.teamurl;
        var zmteam=teamarr[1];
        zmteam.innerHTML=zm.team;
    </script>
</body>

</html>